<template>
  <div class="top-header">
    <div class="top-header-right">
      <el-badge is-dot>
        <el-icon><Bell /></el-icon>
      </el-badge>
      <img src="@/assets/xiaobai.jpg" alt="" />
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link ml">
          {{ hellowStr }}，{{ username }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="User" command="user"
              >个人中心</el-dropdown-item
            >
            <el-dropdown-item icon="SwitchButton" command="logout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { ArrowDown } from "@element-plus/icons-vue";
import { useUserStore } from "@/store/auth";
import { useRouter } from "vue-router";
import { computed } from "vue";
const router = useRouter();
const userStore = useUserStore();
const { username } = storeToRefs(userStore);

const hellowStr = computed(() => {
  const hour = new Date().getHours(); // 只获取一次时间
  if (hour >= 6 && hour < 12) return "早上好";
  if (hour >= 12 && hour < 18) return "下午好";
  if (hour >= 18 && hour < 24) return "晚上好";
  return "凌晨好"; // 最后一个条件可直接用 return
});
// 下拉菜单选择
const handleCommand = (command: string) => {
  if (command === "user") {
    router.push("/personal");
  } else if (command === "logout") {
    userStore.logout();
    router.push("/login");
  }
};
</script>

<style lang="less" scoped>
.top-header {
  height: 60px;
  background-color: #fff;
  padding: 0 20px;
  .top-header-right {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-left: 20px;
    }
    float: right;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-left: 20px;
    }
    .item {
      margin-top: 10px;
    }
  }
}
</style>
